import React from 'react';
import "./index.css"
// 引入路由插件
import {HashRouter as Router,Route,Redirect} from "react-router-dom"
// 引入路由组件
import Index from '../Index/Index';
import House from '../House/House';
import Collect from '../Collect/Collect';
import My from '../My/My';

// 引入ant插件

import { TabBar } from 'antd-mobile';

// 在外部准备路由数据
let tab=[
    {txt:"首页",path:"/nav/index",icon:"icon-ind"},
    {txt:"找房",path:"/nav/house",icon:"icon-findHouse"},
    {txt:"收藏",path:"/nav/coll",icon:"icon-coll"},
    {txt:"我的",path:"/nav/my",icon:"icon-my"},
]

class NavBar extends React.Component {
    state={
        selectedTab:"/nav/index"
    }
    rendertab(){
        return tab.map((v,k)=>{
            return <TabBar.Item
            title={v.txt}
            key={v.txt}
            icon={
                <i className={"iconfont "+v.icon}></i>
            }
            selectedIcon={
                <i className={"iconfont "+v.icon}></i>
            }
            selected={this.state.selectedTab === v.path}
           
            onPress={() => {
              this.setState({
                selectedTab: v.path,
              });
              // 跳路由
              this.props.history.push(v.path)
            }}
           
          >
          
          </TabBar.Item>
        })
    }
    render() { 
        return <div>
           
            <Router>

                <Route path="/nav/index" component={Index} />
                <Route path="/nav/house" component={House} />
                <Route path="/nav/coll" component={Collect} />
                <Route path="/nav/my" component={My} />

                <Redirect from="/nav" to="/nav/index" />
            </Router>

            {/* 底部导航 */}
            <p style={{height:"50px"}}></p>
            <TabBar
                unselectedTintColor="#949494"
                tintColor="#33A3F4"
                barTintColor="white"
                hidden={false}
               
            >
              {this.rendertab()}
          
           </TabBar>
        </div>;
    }
}
 
export default NavBar;